<template>
  <div class="app-container">
    <el-card>
      <div class="filter-container">
        <el-input
          v-model="searchForm.id"
          clearable
          class="filter-item"
          size="mini"
          style="width: 200px;"
        />
        <el-button class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="handleSearch">{{ $t('table.search') }}</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-close" size="mini" @click="handleClear">{{ $t('table.clear') }}</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-refresh" size="mini" @click="handleRefresh">{{ $t('table.refresh') }}</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="mini" @click="handleCreate">{{ $t('table.add') }}</el-button>
      </div>
      <div class="table-container">
        <el-table ref="table" v-loading="tableLoading" :data="tableData" style="width: 100%" size="mini">
          <el-table-column label="index" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 + (page.currentPage - 1) * page.pageSize }}</span>
            </template>
          </el-table-column>

          <el-table-column label="编号" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="日志类型" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="日志标题" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务ID" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.serviceId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.createBy }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作IP地址" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.remoteAddr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户代理" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.userAgent }}</span>
            </template>
          </el-table-column>
          <el-table-column label="请求URI" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.requestUri }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作方式" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.method }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作提交的数据" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.params }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="删除标记" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.delFlag }}</span>
            </template>
          </el-table-column>
          <el-table-column label="异常信息" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.exception }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.tenantId }}</span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('table.actions')" fixed="right" header-align="center" width="185" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
              <el-button type="text" size="mini" icon="el-icon-delete" @click="_delObj(scope.row)">{{ $t('table.delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="page.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isCreate ? $t('create') : $t('update')" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="180px">
          <el-form-item label="编号" prop="id">
            <el-input v-model="form.id" />
          </el-form-item>
          <el-form-item label="日志类型" prop="type">
            <el-input v-model="form.type" />
          </el-form-item>
          <el-form-item label="日志标题" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="服务ID" prop="serviceId">
            <el-input v-model="form.serviceId" />
          </el-form-item>
          <el-form-item label="创建者" prop="createBy">
            <el-input v-model="form.createBy" />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="form.createTime" />
          </el-form-item>
          <el-form-item label="更新时间" prop="updateTime">
            <el-input v-model="form.updateTime" />
          </el-form-item>
          <el-form-item label="操作IP地址" prop="remoteAddr">
            <el-input v-model="form.remoteAddr" />
          </el-form-item>
          <el-form-item label="用户代理" prop="userAgent">
            <el-input v-model="form.userAgent" />
          </el-form-item>
          <el-form-item label="请求URI" prop="requestUri">
            <el-input v-model="form.requestUri" />
          </el-form-item>
          <el-form-item label="操作方式" prop="method">
            <el-input v-model="form.method" />
          </el-form-item>
          <el-form-item label="操作提交的数据" prop="params">
            <el-input v-model="form.params" />
          </el-form-item>
          <el-form-item label="执行时间" prop="time">
            <el-input v-model="form.time" />
          </el-form-item>
          <el-form-item label="删除标记" prop="delFlag">
            <el-input v-model="form.delFlag" />
          </el-form-item>
          <el-form-item label="异常信息" prop="exception">
            <el-input v-model="form.exception" />
          </el-form-item>
          <el-form-item label="" prop="tenantId">
            <el-input v-model="form.tenantId" />
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="dialog = false">取消</el-button>
          <el-button v-if="isCreate" type="primary" @click="_addObj">{{ $t('table.confirm') }}</el-button>
          <el-button v-else type="primary" @click="_putObj">{{ $t('table.confirm') }}</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getPage, getObj, addObj, putObj, delObj } from '@/api/syslog'
// import permission from '@/directive/permission/index.js'
export default {
  name: 'Syslog',
  // directives: { permission },
  data() {
    return {
      searchForm: {},
      tableData: [],
      form: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      rules: {
        id: [],
        type: [],
        title: [],
        serviceId: [],
        createBy: [],
        createTime: [],
        updateTime: [],
        remoteAddr: [],
        userAgent: [],
        requestUri: [],
        method: [],
        params: [],
        time: [],
        delFlag: [],
        exception: [],
        tenantId: []
      },
      isCreate: false,
      tableLoading: false,
      dialog: false
    }
  },
  created() {
    this._getPage()
  },
  methods: {
    // 分页
    _getPage() {
      this.tableLoading = true
      getPage(Object.assign({ current: this.page.currentPage, size: this.page.pageSize }, this.searchForm))
        .then(response => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.tableLoading = false
        })
    },
    // 插入
    _addObj(row) {
      addObj(row).then(response => {
        if (!response.result) {
          this._getPage()
        }
      })
    },
    // 删除
    _delObj(row) {
      this.$confirm(this.$t('delTip'), this.$t('delTitle'), {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delObj(row.deptId)
      }).then(response => {
        if (!response.result) {
          this._getPage()
        }
      })
    },
    // 更新
    _putObj() {
      putObj(this.form).then(response => {
        if (!response.result) {
          this._getPage()
        }
      })
    },
    // 刷新
    handleRefresh() {
      this._getPage()
    },
    // 新建
    handleCreate() {
      this.isCreate = true
      this.dialog = true
      this.form = {}
    },
    // 编辑
    handleUpdate(row) {
      this.isCreate = false
      this.dialog = true
      this.form = Object.assign(row, {})
    },
    handleSearch() {
      this._getPage()
    },
    // 清除
    handleClear() {
      this.searchForm = {}
    },
    // 取消
    handleCancel(row) {
      this.isCreate = false
      this.dialog = false
      this.form = {}
    },
    // 刷新
    refreshChange() {
      this._getPage()
    },
    // 切页
    handleCurrentChange(val) {
      this.page.currentPage = val
      this._getPage()
    },
    // 切行
    handleSizeChange(val) {
      this.page.pageSize = val
      this._getPage()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
